<template>
    <hsa-dialog v-model:visible="dialogVisible" title="注册管理" width="70%">
        <div class="custom__dialog-content">
            <el-tabs tab-position="top" class="demo-tabs">
                <el-tab-pane label="未注册表">
                    <el-tabs tab-position="left" class="demo-tabs">
                        <el-tab-pane label="列表信息">
                            <hsa-title-pane fill>
                                <hsa-title-pane-item fill>
                                    <template #title-suffix>
                                        <el-space wrap>
                                            <el-input />
                                            <el-button type="default">重 置</el-button>
                                            <el-button type="primary">查 询</el-button>
                                        </el-space>
                                    </template>
                                    <hsa-table v-bind="unregistered.table" />
                                </hsa-title-pane-item>
                            </hsa-title-pane>
                        </el-tab-pane>
                        <el-tab-pane label="脱敏配置">
                            <el-form label-position="top">
                                <el-form-item label="脱敏数据逻辑">
                                    <el-input type="textarea" :rows="3" placeholder="填写" />
                                </el-form-item>
                                <el-form-item label="脱敏配置(多个字段通过，隔开)">
                                    <el-input type="textarea" :rows="3" placeholder="填写逻辑处理" />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="行权限配置">
                            <el-form label-position="top">
                                <el-form-item label="脱敏配置(多个字段通过，隔开)">
                                    <el-input type="textarea" :rows="3" placeholder="填写" />
                                </el-form-item>
                                <el-form-item label="行权限配置">
                                    <el-tree style="max-width: 600px" :data="data" show-checkbox node-key="id"
                                        :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>

                <el-tab-pane label="已注册表">
                    <el-tabs tab-position="left" class="demo-tabs">
                        <el-tab-pane label="列表信息">
                            <hsa-title-pane fill>
                                <hsa-title-pane-item fill>
                                    <template #title-suffix>
                                        每隔5分钟自动更新
                                    </template>
                                    <hsa-table v-bind="unregistered.table" />
                                </hsa-title-pane-item>
                            </hsa-title-pane>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
            </el-tabs>

        </div>
    </hsa-dialog>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'

    import type { HsaTableColumn } from "hsa-ui"

    // 事件定义
    const emit = defineEmits(['success', 'cancel'])

    // 双向绑定处理
    const dialogVisible = ref(false)


    // 已注册
    const registered = reactive({
        table: {
            autoHeight: true,
            showIndex: true,
            data: [
                {
                    tableName: '表1',
                    tableDesc: 'table1',
                    time: '2021-09-01 12:00:00'
                },
                {
                    tableName: '表2',
                    tableDesc: 'table2',
                    time: '2021-09-01 12:00:00'
                }
            ],
            columns: ref<HsaTableColumn[]>([
                {
                    label: '表名称',
                    prop: 'tableName',
                    align: 'center',
                    width: '200px'
                },
                {
                    label: '表英文名',
                    prop: 'tableDesc',
                    align: 'center',
                    width: '200px'
                },
                {
                    label: '创建时间',
                    align: 'center',
                    prop: 'time',
                },
                {
                    label: '操作',
                    width: '200px',
                    type: 'button',
                    align: 'center',
                    buttonGroup: [
                        {
                            label: '详情',
                            type: 'primary',
                            click() {

                            }
                        }
                    ]
                }
            ])
        }
    })

    // 未注册
    const unregistered = reactive({
        table: {
            autoHeight: true,
            showIndex: true,
            data: [
                {
                    tableName: '表1',
                    tableDesc: 'table1',
                    time: '2021-09-01 12:00:00'
                },
                {
                    tableName: '表2',
                    tableDesc: 'table2',
                    time: '2021-09-01 12:00:00'
                }
            ],
            columns: ref<HsaTableColumn[]>([
                {
                    label: '表名称',
                    prop: 'tableName',
                    align: 'center',
                    width: '200px'
                },
                {
                    label: '表英文名',
                    prop: 'tableDesc',
                    align: 'center',
                    width: '200px'
                },
                {
                    label: '创建时间',
                    align: 'center',
                    prop: 'time',
                },
                {
                    label: '操作',
                    width: '200px',
                    type: 'button',
                    align: 'center',
                    buttonGroup: [
                        {
                            label: '详情',
                            type: 'primary',
                            click() {

                            }
                        }
                    ]
                }
            ])
        }
    })


    // 打开弹窗
    const open = (row: any) => {
        dialogVisible.value = true
    }

    // 关闭弹窗
    const close = () => {
        dialogVisible.value = false
    }

    defineExpose({
        open,
        close
    })


    const data = [
        {
            id: 1,
            label: 'Level one 1',
            children: [
                {
                    id: 4,
                    label: 'Level two 1-1',
                    children: [
                        {
                            id: 9,
                            label: 'Level three 1-1-1',
                        },
                        {
                            id: 10,
                            label: 'Level three 1-1-2',
                        },
                    ],
                },
            ],
        },
        {
            id: 2,
            label: 'Level one 2',
            children: [
                {
                    id: 5,
                    label: 'Level two 2-1',
                },
                {
                    id: 6,
                    label: 'Level two 2-2',
                },
            ],
        },
        {
            id: 3,
            label: 'Level one 3',
            children: [
                {
                    id: 7,
                    label: 'Level two 3-1',
                },
                {
                    id: 8,
                    label: 'Level two 3-2',
                },
            ],
        },
    ]
</script>

<style lang="scss" scoped>
    .custom__dialog-content {
        height: 500px;
        box-sizing: border-box;

        ::v-deep(.el-tabs) {
            height: 100%;

            .el-tab-pane,
            .el-tabs__content {
                height: 100%;
            }
        }
    }
</style>